<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { CloseBold, Aim, Search } from '@element-plus/icons-vue'
import IntroDrawer from './components/IntroDrawer.vue'
import ApplyApi from '@/service/api/apply/apply'
//表格加载状态
const loading = ref(false)
const tableData = ref()

const handleAdd = () => {
  addDialog.value.open()
}

//编辑
const editDialog = ref()

//添加
const addDialog = ref()

//导入
const excelDialog = ref()

const introDialog = ref()

//获取表格数据函数
const getFormList = () => {
  loading.value = true
  ApplyApi.getApplyList().then((res: any) => {
    if (res.code == 200) {
      const okData = res.data.list
        .filter((item: any) => item.status == 1)
        .map((item: any) => {
          if (!item.reason) {
            item.reason = '暂未填写'
          }
          return item
        })
      const titleEnumArray = Array.from(
        new Set(
          res.data.list
            .filter((item: any) => item.status == 1)
            .map((item: any) => {
              return item.projectDetail.title
            })
        )
      )
      filtersProjectTitleKey.value = titleEnumArray.map((item: any) => {
        return {
          text: item,
          value: item
        }
      })
      tableData.value = okData
      loading.value = false
    } else {
      ElMessage.error('获取数据失败')
      loading.value = false
    }
  })
}

const intro = (row: any) => {
  // console.log(row)
  introDialog.value.open(row.userDetail)
}

const facultyMap = ref(['全体', '计院', '理学院', '管院', '医学院'])

const filterFaculty = (value: any, row: any) => {
  return row.projectDetail.faculty === value
}

const filterTitle = (value: any, row: any) => {
  return row.projectDetail.title === value
}

const filtersProjectTitleKey = ref({})
onMounted(() => {
  //获取表格数据
  getFormList()
})
</script>

<template>
  <PageContainer>
    <el-main class="main">
      <el-table
        :data="tableData"
        :default-sort="[{ prop: 'id', order: 'descending' }]"
        v-loading="loading"
        max-height="80vh"
        flexible="true"
      >
        <el-table-column prop="form_id" label="序号" sortable width="130" />
        <el-table-column prop="sex" label="性别" width="130">
          <template #default="scope">
            <div class="name-wrapper">
              <span>{{
                scope.row.userDetail.sex == 0 ? '男' : scope.row.userDetail.sex == 1 ? '女' : '未知'
              }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="avatar" label="头像" sortable width="180">
          <template #default="scope">
            <div class="name-wrapper">
              <img v-if="scope.row.userDetail.avatar" :src="scope.row.userDetail.avatar" alt="" />
              <img v-else src="../../assets/blankAvatar.png" alt="" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="150">
          <template #default="scope">
            <div class="name-wrapper">
              <span>{{ scope.row.userDetail.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="userDetail.stu_num" label="学号" width="160"></el-table-column>
        <el-table-column
          prop="projectDetail.title"
          label="所报项目"
          width="300"
          :filters="filtersProjectTitleKey"
          :filter-method="filterTitle"
          filter-placement="bottom-end"
        >
        </el-table-column>
        <el-table-column
          prop="userDetail.faculty"
          label="学院"
          width="300"
          :filters="[
            { text: '计算机学院', value: 1 },
            { text: '理学院', value: 2 },
            { text: '管院', value: 3 },
            { text: '医学院', value: 4 }
          ]"
          :filter-method="filterFaculty"
          filter-placement="bottom-end"
        >
          <template #default="scope">{{
            scope.row.userDetail.faculty === null
              ? '未知'
              : facultyMap[scope.row.userDetail.faculty]
          }}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" plain round @click="intro(scope.row)">查看简历</el-button>
          </template>
        </el-table-column>
      </el-table>
      <ResourceEdit ref="editDialog" :mode="0"></ResourceEdit>
      <ResourceEdit ref="addDialog" :mode="1"></ResourceEdit>
      <IntroDrawer ref="introDialog"></IntroDrawer>
      <ImportExcel
        ref="excelDialog"
        apiAddress="https://smarttool.wust.edu.cn:3001/api/admin/resource/upload"
      ></ImportExcel>
    </el-main>
  </PageContainer>
</template>

<style lang="scss" scoped>
.name-wrapper {
  display: flex;
  align-items: center;
  img {
    width: 70px;
    height: 70px;
    margin-right: 10px;
  }
}
.header {
  display: flex;
  justify-content: start;
  align-items: center;
  background-color: #fff;
  border-radius: 8px;
}

.main {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 6px;
}
</style>
